<template>
  <div>
    <div class="home-content">
      <div class="content" v-if="loading">
        <div class="echarts">
          <div class="home-title">
            <span>基本信息</span><span>{{ tenantInfo.tenantName }}</span>
          </div>
          <div class="student-number">
            <div class="school-bg">
              <div>学校总数</div>
              <div class="number">{{ data.length }}</div>
            </div>
            <!-- <div class="number-bg">
              <div>学生总数</div>
              <div class="number">
                <span>{{
                  educationDataObj.totalTenantPostNumber.studentNum || 0
                }}</span>
                人
              </div>
            </div> -->
            <div class="releaseFinish-bg">
              <div>发布测评人数</div>
              <div class="number">
                <span>{{
                  educationDataObj.findReleaseFinishTestNum.length
                    ? educationDataObj.findReleaseFinishTestNum[0].num
                    : 0
                }}</span>
                人
              </div>
            </div>
            <div class="fisish-bg">
              <div>已完成测评人数</div>
              <div class="number">
                <span>{{
                  educationDataObj.findFinishTestNum.length
                    ? educationDataObj.findFinishTestNum[0].num
                    : 0
                }}</span>
                人
              </div>
            </div>
            <div class="noreleaseFinish-bg">
              <div>未完成测评人数</div>
              <div class="number">
                <span>{{
                  educationDataObj.findNoReleaseFinishTestNum.length
                    ? educationDataObj.findNoReleaseFinishTestNum[0].num
                    : 0
                }}</span>
                人
              </div>
            </div>
            <!-- <div class="finish-no-bg">
              <div>未完成测评人数</div>
              <div class="number">
                <span>{{
                  educationDataObj.findFinishNoTestNum.length
                    ? educationDataObj.findFinishNoTestNum[0].num
                    : 0
                }}</span>
                人
              </div>
            </div> -->
            <div class="warning-bg">
              <div>预警人数</div>
              <div class="number">
                <span>{{ educationDataObj.findLevelAllNum[0].num }}</span> 人
              </div>
            </div>
          </div>

          <div class="flex">
            <div class="home-title">各学校预警分布</div>
            <div
              class="home-title2 cursor"
              @click="goSkip({ name: '教育局看板' })"
            >
              <i class="el-icon-s-data"></i> 查看数据看板<i
                class="el-icon-arrow-right"
              ></i>
            </div>
          </div>

          <div>
            <el-row class="marginInfo" style="margin-left: 5px">
              <div
                class="marginInfo"
                id="gradeWarningDistribution"
                style="height: 360px"
              ></div>
            </el-row>
          </div>

          <div class="home-title">学校测评信息</div>
          <!-- <div class="school-info">
            <div
              v-for="(item, index) in data"
              :key="index"
              @click="toStudent(item)"
            >
                <img :src="item.imgUrl" alt="" />
              <div>{{ item.tenantName }}</div>
            </div>
          </div> -->
          <div class="school-main">
            <div v-for="item in AllSchool" :key="item.dictKey">
              <div class="typeName">{{ item.dictValue }}</div>
              <div class="school-info">
                <div
                  v-for="item2 in item.list"
                  :key="item2.tenantId"
                  @click="toStudent(item)"
                >
                  <img :src="item2.imgUrl" alt="" />
                  <div>{{ item2.tenantName }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { getTermListAll } from "@/api/system/semester";
import {
  totalTenantPostNumber,
  findFinishNoTestNumEducation,
  findFinishTestNumEducation,
  findLevelAllNumEducation,
  findAllGradeLevelInterveneNumEducation,
  findNoReleaseFinishTestNumEducation,
  findReleaseFinishTestNumEducation,
} from "@/api/report/report";
import { getList, getSchoolList, getSchooltype } from "@/api/system/tenant";
import { getList as getDict } from "@/api/system/dict";
import { getTenantInfo } from "@/api/system/tenant.js";
export default {
  data() {
    return {
      educationDataObj: [],
      yearlyList: [],
      semesterList: [],
      yearly: "",
      half: "",
      termId: "",
      loading: false,
      page: {
        pageSize: 100,
        currentPage: 1,
        total: 0,
      },
      query: {},
      data: [],
      tenantInfo: {},
      schoolList: [],
    };
  },
  created() {
    let tenant =
      localStorage.getItem("saber-userInfo") &&
      JSON.parse(localStorage.getItem("saber-userInfo")).content.tenantId;

    getTenantInfo(tenant).then((res) => {
      this.tenantInfo = res.data.data;
    });

    getSchooltype().then((res) => {
      let data = res.data.data;
      getSchoolList(tenant).then((res1) => {
        let schoolList = res1.data.data;
        data.map((item) => {
          let list = [];
          schoolList.map((item1) => {
            if (item.dictKey == item1.schoolType) {
              list.push(item1);
            }
          });
          item.list = list;
          return item;
        });
        this.schoolList = data;
      });
    });
  },
  mounted() {
    getTermListAll(1, 1000, {}).then((result) => {
      var _this = this; //注意！一定要重新定义一下this指向
      let res18DataList = result.data.data;
      for (let zz = 0; zz < res18DataList.length; zz++) {
        let item = res18DataList[zz];
        _this.yearlyList.push(item);
        _this.semesterList.push(item);
        if (item.currentFlag == "Y") {
          _this.termId = item.termId;
          // _this.half = item.half;
          _this.yearly = item.yearly;
        }
      }
      this.$nextTick(() => {
        this.initData();
      });
    });
  },
  computed: {
    AllSchool() {
      let list = [];
      this.schoolList.map((item) => {
        if (item.list.length > 0) {
          list.push(item);
        }
      });
      return list;
    },
  },
  methods: {
    goSkip(item) {
      this.$router.push({
        name: item.name || "我的待办",
      });
    },
    initData() {
      let _this = this;
      let tenantId = JSON.parse(window.localStorage.getItem("saber-userInfo"))
        .content.tenantId;
      this.$axios
        .all([
          totalTenantPostNumber({
            // tenantId: tenantId,
            category: 4,
            gradeId: "",
          }),
          findFinishNoTestNumEducation({
            tenantId: tenantId,
            termId: _this.termId,
            yearly: _this.yearly,
          }),
          findFinishTestNumEducation({
            tenantId: tenantId,
            termId: _this.termId,
            yearly: _this.yearly,
          }),
          findLevelAllNumEducation({
            tenantId: tenantId,
            termId: _this.termId,
            yearly: _this.yearly,
          }),
          findAllGradeLevelInterveneNumEducation({
            tenantId: tenantId,
            termId: _this.termId,
            yearly: _this.yearly,
          }),
          getDict(1, 1000, { code: "warning_level" }),
          findReleaseFinishTestNumEducation({
            tenantId: tenantId,
            termId: _this.term,
            yearly: _this.yearly,
          }),
          findNoReleaseFinishTestNumEducation({
            tenantId: tenantId,
            termId: _this.term,
            yearly: _this.yearly,
          }),
        ])
        .then((res) => {
          _this.educationDataObj.totalTenantPostNumber = {};
          _this.educationDataObj.totalTenantPostNumber.studentNum =
            res[0].data.data;
          _this.educationDataObj.findFinishNoTestNum = res[1].data.data;
          _this.educationDataObj.findFinishTestNum = res[2].data.data;
          _this.educationDataObj.findLevelAllNum = res[3].data.data;
          _this.educationDataObj.findAllGradeLevelInterveneNum =
            res[4].data.data;
          let levelData = [];
          res[5].data.data[0].children.map((vv) => {
            if (vv.dictKey != 0) {
              levelData.push(vv);
            }
          });
          _this.educationDataObj.levelData = levelData;
          _this.educationDataObj.findReleaseFinishTestNum = res[6].data.data;
          _this.educationDataObj.findNoReleaseFinishTestNum = res[7].data.data;

          _this.loading = true;

          _this.$nextTick(() => {
            _this.getChartData(res[4].data.data);
          });
        });
    },
    getChartData(data) {
      let obj = this.educationDataObj;

      let levelDictValueData = [];
      for (let zz = 0; zz < obj.levelData.length; zz++) {
        levelDictValueData.push(obj.levelData[zz].dictValue);
      }

      let gradeList = {};
      let xAxisDataGrade = [];
      obj.findAllGradeLevelInterveneNum.map((item) => {
        if (!gradeList[item.schoolName]) {
          gradeList[item.schoolName] = [];
          xAxisDataGrade.push(item.schoolName);

          levelDictValueData.map((item2, index) => {
            let data = {
              level: index + 1,
              num: 0,
            };
            gradeList[item.schoolName].push(data);
          });
        }
        gradeList[item.schoolName][item.level - 1] = item;
      });

      const levelList = [];

      Object.values(gradeList).forEach((list) => {
        list.map((item) => {
          const level = item.level - 1;
          if (!levelList[level]) {
            levelList[level] = [];
          }
          levelList[level].push({
            value: item.num,
            levelStr: item.level + "",
            tenantId: item.tenantId,
          });
        });
      });

      let seriesGradeData = [];
      let index = 0;
      let colorList = [
        "#FF4500",
        "#FFA07A",
        "#FFD700",
        "#8552a1",
        "#0D8FBF",
        "#224b8f",
      ];
      levelList.map((item) => {
        seriesGradeData.push({
          name: levelDictValueData[index],
          type: "bar",
          barMaxWidth: 20,
          emphasis: {
            focus: "series",
          },
          data: item,
          itemStyle: {
            normal: {
              borderRadius: [5, 5, 0, 0],
              color: colorList[index],
              label: {
                show: true, //开启显示
                position: "top", //在上方显示
                textStyle: {
                  //数值样式
                  color: "black",
                  fontSize: 12,
                },
              },
            },
          },
        });
        index++;
      });
      //各学校预警分布
      this.getGradeLevel(
        "gradeWarningDistribution",
        "",
        xAxisDataGrade,
        seriesGradeData,
        levelDictValueData
      );
    },
    getGradeLevel(id, title, xAxisData, seriesGradeData, legendData) {
      var chartDom = document.getElementById(id);
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        title: {
          text: title,
          textStyle: {
            color: "#0986b3",
          },
        },
        legend: {
          right: "10%",
          align: "right",
          data: legendData,
          textStyle: {
            color: "black",
          },
        },
        grid: {
          top: "20%",
          bottom: "15%",
          height: 180,
        },
        xAxis: {
          type: "category",
          data: xAxisData,
          axisLabel: {
            interval: 0,
            rotate: 40,
            textStyle: {
              color: "black",
            },
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            interval: 0,
            rotate: 40,
            textStyle: {
              color: "black",
            },
          },
        },
        series: seriesGradeData,
      };
      option && myChart.setOption(option);
      myChart.on("click", (params) => {
        // 在用户点击后控制台打印数据的名称
        this.$router.push({
          name: "学校看板",
          query: { tenantId: params.data.tenantId },
        });
      });
    },
    onLoad(page, params = {}) {
      getList(
        page.currentPage,
        page.pageSize,
        Object.assign(params, this.query)
      ).then((res) => {
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
        this.data = this.data.filter((item) => {
          if (!item.tenantName.includes("教育局")) return item;
        });
      });
    },
    toStudent(item) {
      this.$router.push({
        name: "学校看板",
        query: { tenantId: item.tenantId },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./../css/bg.scss";

.home-title {
  display: flex;
  justify-content: space-between;
}

.home-title2 {
  font-size: 15px;
}

.flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cursor {
  cursor: pointer;
  color: rgb(64, 158, 255);
}

.student-number {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
  margin: 15px 0;

  > div {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    width: 27vh;
    min-width: 160px;
    max-width: 22%;
    height: 13vh;
    min-height: 60px;
    max-height: 80px;
    border-radius: 10px;

    .number {
      font-size: 24px;
    }
  }
}

.home-to {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 15px 0;
  font-size: 14px;

  > div {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    width: 100px;
    height: 100px;

    img {
      width: 60px;
    }
  }
}

.content {
  display: flex;
  justify-content: space-between;

  > .echarts {
    width: 100%;
  }

  > .advertisement {
    width: 20%;

    .img-div {
      text-align: center;
      margin: 15px 0;

      img {
        width: 100%;
        border-radius: 10px;
      }

      .advert-title {
        text-align: center;
      }
    }

    .menu {
      padding-left: 20px;
      > div {
        text-indent: 10px;
        margin: 20px 0;
        font-size: 14px;
        display: flex;
        align-items: center;

        span {
          cursor: pointer;
        }
      }
    }
  }
}

.school-main {
  margin-top: 20px;

  .typeName {
    color: #0986b3;
    font-size: 16px;
    font-weight: bold;
  }

  .school-info {
    display: flex;
    flex-wrap: wrap;

    > div {
      width: 10%;
      min-width: 30px;
      margin: 1.2%;
      font-size: 14px;
      text-align: center;

      img {
        width: 50%;
        border-radius: 50%;
      }
    }
  }
}
</style>